<template>
	<view>
		<view class="popup-login-type" type="bottom">
			<view class="popup-top">
				<p @tap="closeTypeLogin">&#10005</p>
				<h4>请选择登录方式</h4>
				<text></text>
			</view>
			<p class="myRead">
				请在下方验证方式中 <text>任选一种方式</text> 验证你的身份
			</p>
			<view class="popup-type">
				<view class="code-login" @tap="codeLogin" v-show="props.loginType.codeLogin">
					<i class="iconfont icon-shouji"></i>
					<text>短信登录</text>
				</view>
				<view class="pass-login" @tap="passLogin" v-show="props.loginType.passLogin">
					<i class="iconfont icon-suoding_huaban"></i>
					<text>密码登录</text>
				</view>
			</view>
			<view class="loginIngo">
				登录遇到问题?
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue'
	const props = defineProps(['loginType', 'phone'])
	const emit = defineEmits(['passLoginHandler', 'codeLoginHandler', 'closeTypeLogin'])

	const passLogin = () => {
		let fn = () => {
			uni.navigateTo({
				url: `/pages/login/passWordLogin/passWordLogin?BLi=${encodeURIComponent(JSON.stringify(props.phone))}`,
			})
		}
		emit('passLoginHandler', fn)
	}

	const codeLogin = () => {
		let fn = () => {
			uni.navigateTo({
				url: `/pages/login/phoneLogin/phoneLogin?BLi=${encodeURIComponent(JSON.stringify(props.phone))}`,
			})
		}
		emit('codeLoginHandler', fn)
	}

	const closeTypeLogin = () => {
		emit('closeTypeLogin')
	}
</script>

<style lang="scss" scoped>
	:deep(.popup-login-type) {
		height: 40vh;
		padding: 1.25rem 1rem 0 1rem;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.popup-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 60rpx;

			h4 {
				color: #1d2129;
				font-family: "PingFang SC";
				font-size: 34rpx;
				font-weight: 500;
			}
		}

		.myRead {
			color: #1d2129;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 39.2rpx;

			span {
				color: #1d2129;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 520;
				line-height: 39.2rpx;
			}
		}

		.popup-type {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 40rpx 0;

			i {
				font-size: 50rpx;
				height: 116rpx;
				width: 116rpx;
				background-color: #F2F3F5;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
			}

			.code-login {

				margin-right: 40rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
			}

			.pass-login {
				margin-left: 40rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
			}

			span {
				align-self: stretch;
				color: #1d2129;
				text-align: center;
				font-family: "PingFang SC";
				font-size: 24rpx;
			}
		}

		.loginIngo {
			text-align: center;
			color: #86909c;
			text-align: center;
			font-family: "PingFang SC";
			font-size: 24rpx;
		}
	}
</style>